<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程设置</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
    </el-breadcrumb>

    <hr />

    <el-card>
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input
            v-model="queryInfo.curBy"
            placeholder="请输入授课人姓名"
            clearable
          >
            <template slot="prepend">授课人姓名</template>
          </el-input>
        </el-col>

        <el-col :span="7">
          <el-input
            v-model="queryInfo.curName"
            placeholder="请输入课程名称"
            clearable
          >
            <template slot="prepend">课程名称</template>
          </el-input>
        </el-col>

        <el-col :span="3">
          <el-button type="primary" @click="getCurList">查询</el-button>
        </el-col>
      </el-row>

      <!-- 功能区域 -->
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button type="primary" @click="addDialogVisible = true"
            >添加课程</el-button
          >
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="curList" border stripe style="width: 100%">
        <el-table-column
          prop="curId"
          label="课程编号"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="curName"
          label="课程名"
          sortable
        ></el-table-column>
        <el-table-column prop="curBy" label="授课人"></el-table-column>
        <el-table-column prop="curAddress" label="授课地点"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              plain
              @click="showEditDialog(scope.row.curId)"
              >编辑</el-button
            >

            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              plain
              @click="showDelDialog(scope.row.curId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.page"
        :page-size="queryInfo.size"
        layout="total, prev, pager, next"
        :total="totalPage"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 添加课程 -->
    <el-dialog
      title="添加课程"
      :visible.sync="addDialogVisible"
      width="width"
      @close="addDialogClosed"
    >
      <el-form
        ref="addRef"
        :model="addForm"
        :rules="addRules"
        label-width="100px"
      >
        <el-form-item label="课程名" prop="curName">
          <el-input v-model="addForm.curName"></el-input>
        </el-form-item>

        <el-form-item label="授课人" prop="tecId">
          <el-autocomplete
            @focus="loadAllTec"
            popper-class="my-autocomplete"
            v-model="state"
            :value="addForm.tecId"
            :fetch-suggestions="querySearchAsync"
            :trigger-on-focus="false"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div class="name">{{ item.tecName }}</div>
              <span class="phone">手机号：{{ item.phone }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="上课时间" prop="curTime">
          <el-autocomplete
            @focus="loadAllTime"
            popper-class="my-autocomplete"
            v-model="stateTime"
            :value="addForm.curTime"
            :fetch-suggestions="querySearchTime"
            placeholder="请输入内容"
            @select="handleSelectTime"
          >
            <template slot-scope="{ item }">
              <div>{{ item.timeStr }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="周时" prop="curCycle">
          <el-input v-model="addForm.curCycle"></el-input>
        </el-form-item>

        <el-form-item label="上课地点" prop="curAddress">
          <el-input v-model="addForm.curAddress"></el-input>
        </el-form-item>

        <el-form-item label="课程类型" prop="curType">
          <el-select v-model="addForm.curType" placeholder="请选择">
            <el-option label="人文素养类" value="1"></el-option>
            <el-option label="职业技能类" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否必修" prop="isPub">
          <el-switch
            v-model="addForm.isPub"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSub">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑课程 -->
    <el-dialog
      title="修改课程信息"
      :visible.sync="editDialogVisible"
      width="width"
      @close="editDialogClosed"
    >
      <el-form
        ref="editRef"
        :model="editForm"
        :rules="editRules"
        label-width="100px"
      >
        <el-form-item label="课程名" prop="curName">
          <el-input v-model="editForm.curName" disabled></el-input>
        </el-form-item>

        <el-form-item label="授课人" prop="tecId">
          <el-autocomplete
            @focus="loadAllTec"
            popper-class="my-autocomplete"
            v-model="state"
            :value="editForm.tecId"
            :fetch-suggestions="querySearchAsync"
            :trigger-on-focus="false"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div class="name">{{ item.tecName }}</div>
              <span class="phone">手机号：{{ item.phone }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="上课时间" prop="curTime">
          <el-autocomplete
            @focus="loadAllTime"
            popper-class="my-autocomplete"
            v-model="stateTime"
            :value="editForm.curTime"
            :fetch-suggestions="querySearchTime"
            placeholder="请输入内容"
            @select="handleSelectTime"
          >
            <template slot-scope="{ item }">
              <div>{{ item.timeStr }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="周时" prop="curCycle">
          <el-input v-model="editForm.curCycle"></el-input>
        </el-form-item>

        <el-form-item label="上课地点" prop="curAddress">
          <el-input v-model="editForm.curAddress"></el-input>
        </el-form-item>

        <el-form-item label="课程类型" prop="curType">
          <el-select v-model="editForm.curType" placeholder="请选择">
            <el-option label="人文素养类" :value="1"></el-option>
            <el-option label="职业技能类" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否必修" prop="isPub">
          <el-switch
            v-model="editForm.isPub"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>

        <el-form-item label="课程状态" prop="status">
          <el-radio-group v-model="editForm.status">
            <el-radio :label="'1'">开课中</el-radio>
            <el-radio :label="'0'">已结课</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSub">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除警告框 -->
    <el-dialog title="警告" :visible.sync="delDialogVisible" width="30%">
      <span>您确定要删除此课程吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delCurById">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curList: [],
      queryInfo: {
        page: 1,
        size: 10,
        curBy: '',
        curName: ''
      },
      totalPage: 0,
      addDialogVisible: false,
      addForm: {
        curName: '',
        tecId: '',
        curTime: '',
        curCycle: '',
        curAddress: '',
        curType: '',
        isPub: ''
      },
      // 添加课程选择教师
      tecList: [],
      timeout: '',
      state: '',
      stateTime: '',
      timeList: [],
      addRules: {
        curName: [{ required: true, message: '请输入课程名', trigger: 'blur' }],
        tecId: [
          { required: true, message: '请输入授课人信息', trigger: 'blur' }
        ],
        curTime: [
          { required: true, message: '请输入上课时间', trigger: 'blur' }
        ],
        curCycle: [
          {
            required: true,
            message: '请输入上课周周期',
            trigger: 'blur'
          }
        ],
        curAddress: [
          {
            required: true,
            message: '请输入上课地点',
            trigger: 'blur'
          }
        ],
        curType: [
          { required: true, message: '请选择课程类型', trigger: 'blur' }
        ]
      },
      editDialogVisible: false,
      editForm: {
        curName: '',
        tecId: '',
        curTime: '',
        curCycle: '',
        curAddress: '',
        curType: '',
        isPub: '',
        status: ''
      },
      editRules: {
        tecId: { required: true, message: '请输入授课人信息', trigger: 'blur' },
        curTime: { required: true, message: '请输入上课时间', trigger: 'blur' },
        curCycle: {
          required: true,
          message: '请输入上课周周期',
          trigger: 'blur'
        },
        curAddress: {
          required: true,
          message: '请输入上课地点',
          trigger: 'blur'
        },
        curType: { required: true, message: '请选择课程类型', trigger: 'blur' }
      },
      delDialogVisible: false,
      delId: 0
    }
  },
  created() {
    this.getCurList()
  },
  methods: {
    async getCurList() {
      const { data: res } = await this.$http.get('cur/list', {
        params: this.queryInfo
      })
      if (res.code !== 20000) {
        return this.$message.error('获取列表信息失败')
      }
      this.curList = res.data.list
      this.totalPage = res.data.total
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getCurList()
    },
    // 查找选择教师
    querySearchAsync(queryString, cb) {
      this.addForm.tecId = ''
      this.editForm.tecId = ''
      var tecList = this.tecList
      var results = queryString
        ? tecList.filter(this.createStateFilter(queryString))
        : tecList
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.tecName.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    handleSelect(item) {
      this.addForm.tecId = item.tecId
      this.editForm.tecId = item.tecId
      this.state = item.tecName
    },
    // 加载所有教师信息
    async loadAllTec() {
      if (this.tecList.length < 1) {
        const { data: res } = await this.$http.get('tec/all')
        if (res.code !== 20000) {
          return this.$message.error('查找失败!')
        }
        this.tecList = res.data
      }
    },
    // 查找选择时间
    querySearchTime(queryString, cb) {
      if (queryString.length < 5) {
        this.addForm.curTime = ''
        this.editForm.curTime = ''
      }
      var timeList = this.timeList
      var results = queryString
        ? timeList.filter(this.createStateTimeFilter(queryString))
        : timeList
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateTimeFilter(queryString) {
      return stateTime => {
        return (
          stateTime.timeStr.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    handleSelectTime(item) {
      this.addForm.curTime = item.id
      this.editForm.curTime = item.id
      this.stateTime = item.timeStr
    },
    // 加载所有时间信息
    async loadAllTime() {
      if (this.timeList.length < 1) {
        const { data: res } = await this.$http.get('cur/time')
        if (res.code !== 20000) {
          return this.$message.error('查找失败!')
        }
        this.timeList = res.data
      }
    },
    addSub() {
      this.$refs.addRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('cur/add', this.addForm)
        if (res.code !== 20000) {
          return this.$message.error('添加失败!')
        }
        this.getCurList()
        this.addDialogVisible = false
        return this.$message.success('添加成功!')
      })
    },
    addDialogClosed() {
      this.$refs.addRef.resetFields()
      this.state = ''
      this.stateTime = ''
    },
    async showEditDialog(id) {
      const { data: res } = await this.$http.get('cur/one/' + id)
      if (res.code !== 20000) {
        return this.$message.error('查询失败!')
      }
      this.editForm = res.data
      this.state = res.data.curBy
      this.stateTime = res.data.eduTime.timeStr
      this.editDialogVisible = true
    },
    editSub() {
      this.$refs.editRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('cur/update', this.editForm)
        if (res.code !== 20000) {
          return this.$message.error('修改失败!')
        }
        this.getCurList()
        this.editDialogVisible = false
        return this.$message.success('修改成功')
      })
    },
    editDialogClosed() {
      this.$refs.editRef.resetFields()
      this.state = ''
      this.stateTime = ''
    },
    showDelDialog(id) {
      this.delId = id
      this.delDialogVisible = true
    },
    async delCurById() {
      const { data: res } = await this.$http.delete('cur/del/' + this.delId)
      if (res.code !== 20000) {
        return this.$message.error('删除失败!')
      }
      this.getCurList()
      this.delDialogVisible = false
      return this.$message.success('删除成功!')
    }
  }
}
</script>

<style lang="less" scoped>
.el-col {
  line-height: 40px;
}

.el-row {
  margin-bottom: 10px;
  text-align: left;
}

.el-form-item {
  text-align: left;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .phone {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .phone {
      color: #ddd;
    }
  }
}
</style>
